<template>
    <div>
      <headCommod/>
      <div class="main">
        <div class="container cl">
          <div class="search">
            <div class="search-a cl to-right">
              <div class="content">
                <div class="adress">
                  <div class="adress-top">
                    <div class="top-l">出发地</div>
                    <div class="top-r">目的地</div>
                  </div>
                  <div class="adress-bottom">
                    <div class="top-l" style="position: relative">
                      <textarea @click="starShow = !starShow; endShow = false" class="input noclick" v-html="starAdress">
                      </textarea>
                      <img class="adress-to" src="../assets/images/to.jpg" alt="">
                      <el-collapse-transition>
                        <div v-if="starShow" class="adress-list">
                          <dl class="cl">
                            <dt><h3>热门城市</h3></dt>
                            <dd @click="changeAdree('data', 1)">佛山市<br/>FoShanShi</dd>
                            <dd>广州市<br/>GuangZhouShi</dd>
                          </dl>
                          <dl class="cl">
                            <dt><h3>热门港口</h3></dt>
                            <dd>佛山市<br/>FoShanShi</dd>
                            <dd>广州市<br/>GuangZhouShi</dd>
                          </dl>
                        </div>
                      </el-collapse-transition>
                    </div>
                    <div class="top-r" style="position: relative">
                      <textarea @click="endShow = !endShow; starShow = false" class="input noclick" v-html="endAdress">
                      </textarea>
                      <el-collapse-transition>
                        <div v-if="endShow" class="adress-list">
                          <dl class="cl">
                            <dt><h3>热门城市</h3></dt>
                            <dd @click="changeAdree('data', 2)">佛山市<br/>FoShanShi</dd>
                            <dd>广州市<br/>GuangZhouShi</dd>
                          </dl>
                          <dl class="cl">
                            <dt><h3>热门港口</h3></dt>
                            <dd>佛山市<br/>FoShanShi</dd>
                            <dd>广州市<br/>GuangZhouShi</dd>
                          </dl>
                        </div>
                      </el-collapse-transition>
                    </div>
                  </div>
                </div>
                <div class="button">
                  <i class="el-icon-search"></i>
                </div>
              </div>
            </div>
            <p class="to-left"> <span class="one-bg">1</span> 选择商品 <i class="el-icon-right"></i> <span class="one-bg one-no-bg">1</span> 选择港前/港后服务</p>
            <div class="search-b cl to-left">
              <div class="content-b">
                <div class="b-l" style="position: relative;">
                  <img @click="showMonth = !showMonth" class="noclick" :src="require('../assets/images/months/' + month + '.jpg')" alt="">
                  <el-collapse-transition>
                    <div v-if="showMonth" class="months">
                      <ul>
                        <li
                          @click="month = item; showMonth = false"
                          v-for="item in 12" :key="item">
                          <img :src="require('../assets/images/months/' + item + '.jpg')"/>
                        </li>
                      </ul>
                    </div>
                  </el-collapse-transition>
                </div>
                <div class="b-r">
                  <div @click="preDate" class="b-r-l">
                    <i class="el-icon-arrow-left"></i>
                  </div>
                  <!--<el-calendar :range="date">-->
                    <div class="date">
                      <ul>
                        <li @click="selectDate = 0" :class="{active: selectDate == 0}">
                          <b>Mon</b>
                          <p>{{ date[0] }}</p>
                        </li>
                        <li @click="selectDate = 1" :class="{active: selectDate == 1}">
                          <b>Tus</b>
                          <p>{{ date[1] }}</p>
                        </li>
                        <li @click="selectDate = 2" :class="{active: selectDate == 2}">
                          <b>Wed</b>
                          <p>{{ date[2] }}</p>
                        </li>
                        <li @click="selectDate = 3" :class="{active: selectDate == 3}">
                          <b>Thu</b>
                          <p>{{ date[3] }}</p>
                        </li>
                        <li @click="selectDate = 4" :class="{active: selectDate == 4}">
                          <b>Fri</b>
                          <p>{{ date[4] }}</p>
                        </li>
                        <li @click="selectDate = 5" :class="{active: selectDate == 5}">
                          <b>Sat</b>
                          <p>{{ date[5] }}</p>
                        </li>
                        <li @click="selectDate = 6" :class="{active: selectDate == 6}">
                          <b>Sun</b>
                          <p>{{ date[6] }}</p>
                        </li>
                      </ul>
                    </div>
                  <div @click="nextDate" class="b-r-r">
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
            </div>
            <p class="to-right">点击查询价格，更新此商品运价</p>
            <div v-for="item in 2" class="search-c cl to-top">
              <div class="content-b">
                <div class="adress">
                  <div class="adress-bottom">
                    <div class="adress-l">
                      <p class="adress-l-t">3/3</p>
                      <p>深圳 SHENZHEN</p>
                    </div>
                    <div class="adress-c">
                      45天
                    </div>
                    <div class="adress-r">
                      <p class="adress-l-t">3/3</p>
                      <p>深圳 SHENZHEN</p>
                    </div>
                  </div>
                </div>
                <div class="button">
                  查询价格
                </div>
              </div>
            </div>
            <div class="search-a cl to-bottom">
              <div class="content">
                <div class="pages center">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    prev-text="上一页"
                    next-text="下一页"
                    :page-size="100"
                    layout="prev, pager, next"
                    :total="1000">
                  </el-pagination>
                </div>
              </div>
            </div>
            <br/><br/>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
import headCommod from '../components/Head'

export default {
  name: 'accountManagement',
  data () {
    return {
      starShow: false,
      endShow: false,
      showMonth: false,
      month: 1,
      starAdress: '深圳\r\Shenzhen',
      endAdress: '深圳\nShenzhen',
      date: [1, 2, 3, 4, 5, 6, 7],
      selectDate: 3
    }
  },
  methods: {
    changeAdree (data, type) {
      if (type == 1) {
        this.starAdress = '广州\nGuangZhou'
        this.starShow = false
      }
      if (type == 2) {
        this.endAdress = '广州\nGuangZhou'
        this.endShow = false
      }
    },
    preDate () {
      let newDate = this.date.map(item => {
        if (item - 7 <= 0) {
          return item - 7 + 30
        } else {
          return item - 7
        }
      })
      this.date = newDate
    },
    nextDate () {
      let newDate = this.date.map(item => {
        if (item + 7 > 30) {
          return item + 7 - 30
        } else {
          return item + 7
        }
      })
      this.date = newDate
    }
  },
  mounted () {
    document.addEventListener('click', (e) => {
      if(e.target.className.indexOf('noclick') < 0){
          this.starShow = false;
          this.endShow = false;
          this.showMonth = false;
      }
    })
  },
  components: {
    headCommod
  }
}
</script>

<style scoped>
  .main {
    /*background: #ededed;*/
    padding-top: 50px;
  }

  .search-a,.search-b,.search-c {
    background: #fff;
    padding: 20px 0;
    margin: 20px 0;
    /*border: 1px solid #eee;*/
  }

  .content {
    width: 60%;
    margin: 0 auto;
  }

  .adress {
    width: calc(100% - 68px);
    float: left;
    margin-right: 10px;
  }

  .button {
    background: #387e48;
    width: 58px;
    height: 62px;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 62px;
    border-radius: 4px;
    float: right;
  }

  .search-c .adress {
    width: calc(100% - 200px);
    margin-right: 90px;
  }

  .search-c .button {
    width: 110px;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    margin-top: 20px;
  }

  .adress-top {
    border-bottom: 1px solid #ccc;
    height: 30px;
  }

  .top-l,.top-r {
    width: 50%;
    float: left;
    color: #666;
    position: relative;
  }

  .adress-to {
    position: absolute;
    right: 20px;
    top: 20px;
  }

  .content-b {
    width: 90%;
    margin: 0 auto;
  }

  .b-l {
    width: 69px;
    float: left;
    margin-top: 8px;
  }

  .b-r {
    width: calc(100% - 99px);
    float: left;
    margin-left: 30px;
    position: relative;
  }

  .b-r-l {
    position: absolute;
    left: 0px;
    top: 38%;
    font-size: 20px;
    cursor: pointer;
  }
  .b-r-r {
    position: absolute;
    right: 0px;
    top: 38%;
    font-size: 20px;
    cursor: pointer;
  }

  .one-bg {
    background: #387e48;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 4px;
    display: inline-block;
    color: #fff;
  }

  .one-no-bg {
    background: none;
    width: 18px;
    height: 18px;
    line-height: 18px;
    border: 1px solid #aaa;
    color: #aaa;
  }

  .adress-l,.adress-c,.adress-r {
    width: 33.33%;
    text-align: center;
    float: left;
    height: 80px;
  }

  .adress-c {
    background: url("../assets/images/to.jpg") no-repeat center center;
  }

  .adress-l-t {
    border-bottom: 1px solid #ccc;
    line-height: 40px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
  }

  .adress-list {
    position: absolute;
    width: 600px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    z-index: 99;
    left: 0px;
    top: 45px;
  }

  .adress-list dl {
    margin-bottom: 20px;
  }

  .adress-list dt h3 {
    border-left: 3px solid #1a632c;
    padding-left: 10px;
  }

  .adress-list dl dd {
    float: left;
    margin:10px 30px 10px 0;
    cursor: pointer;
  }

  .input {
    width: 170px;
    height: 38px;
    line-height: 19px;
    border: none;
    resize: none;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    margin-top: 3px;
    border: 1px solid transparent;
  }

  .date {
    width: calc(100% - 40px);
    margin: 0 auto;
    text-align: center;
  }

  .date li {
    display: inline-block;
    text-align: center;
    list-style: none;
    line-height: 42px;
    padding: 0 15px;
    cursor: pointer;
    margin: 0 calc(100% / 7 - 108px);
  }

  .date li p {
    color: #999;
  }

  .date li.active {
    background: #387e48;
    color: #fff;
    border-radius: 4px;
  }

  .date li.active p {
    color: #fff;
  }

  .months {
    position: absolute;
    width: 840px;
    background: #fff;
    border: 3px solid #377e46;
    z-index: 9999;
    top: 55px;
    left: 4px;
    border-radius: 0 4px 4px 4px;
  }

  .months li {
    float: left;
    list-style: none;
    margin: 30px 15px;
    cursor: pointer;
  }

  .months li img {
    width: 40px;
  }

  textarea:focus {
    /*border: 1px solid #ddd;*/
    outline: none;
  }
</style>

<style>
  .el-calendar__header {
    display: none;
  }

  /*.el-calendar .current {*/
    /*border: none;*/
  /*}*/

  /*.el-calendar .el-calendar-day {*/
    /*height: auto;*/
    /*text-align: center;*/
  /*}*/

  /*.b-r .el-calendar__body {*/
    /*padding: 0;*/
  /*}*/
</style>
